<template>
    <div>
        <a-modal
                :confirmLoading="loading"
                destroyOnClose
                :maskClosable="false"
                v-model="visible"
                :title="title"
                @ok="handleOk"
                @cancel="handleCancel"
        >
            <a-form :form="form">
                <a-form-item
                        label="字典名称"
                        :label-col="{span:8}"
                        :wrapper-col="{span:12}"
                >
                    <a-input
                            allowClear
                            v-decorator="['name', {
                                initialValue: data && data.name,
                                rules: [{ required: true, message: '请输入名称！' }]
                            }]"
                    />
                </a-form-item>

                <a-form-item
                        label="字典标签"
                        :label-col="{span:8}"
                        :wrapper-col="{span:12}"
                >
                    <a-input
                            v-decorator="['tag',{
                                initialValue: data && data.tag,
                            }]"
                            allowClear
                    />
                </a-form-item>

                <a-form-item
                        label="排序序号"
                        :label-col="{span:8}"
                        :wrapper-col="{span:12}"
                >
                    <a-popover title="提示" trigger="hover">
                        <template slot="content">
                            不填会排在有序号的前面。
                        </template>
                        <a-input-number
                                v-decorator="['orderNo',{
                                    initialValue: data && data.orderNo,
                                }]"
                        />
                    </a-popover>
                </a-form-item>

                <a-form-item
                        label="描述"
                        :label-col="{span:8}"
                        :wrapper-col="{span:12}"
                >
                    <a-textarea
                            v-decorator="['description',{
                                initialValue: data && data.description,
                            }]"
                            :auto-size="{ minRows: 3, maxRows: 5 }"
                    />
                </a-form-item>
            </a-form>

        </a-modal>
    </div>
</template>

<script>
  import {mapActions, mapState} from 'vuex'

  export default {
    name: "DictModel",
    data() {
      return {
        title: '添加',
        url: '',
        form: this.$form.createForm(this),
        visible: false,
        loading: false,
        data: ''
      };
    },
    computed: {
      ...mapState('dict', ['parentId'])
    },
    methods: {
      ...mapActions('dict', ['saveActions', 'queryTreeInfo']),
      showModal(title, url, data) {
        if (title) {
          this.title = title;
          this.url = url;
          this.visible = true
          this.data = data
        }
      },
      handleOk() {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.loading = true
            let url = this.url
            if (this.title == '添加子节点') {
              Object.assign(values, {parentId: this.parentId[0]})
            }
            this.saveActions({values, url}).then(() => {
              this.handleCancel()
              if (this.title.indexOf('子节点') > 0) {
                this.queryTreeInfo({parentId: this.parentId[0]})
              } else {
                this.queryTreeInfo({pageSize: -1})
              }
            })
          }
        })
      },
      handleCancel() {
        this.visible = false
        this.loading = false
      }
    },
  }
</script>

<style scoped>

</style>